{{extend '../_layouts/home.html'}}

{{block 'title'}}{{'多人博客 - 首页'}}{{/block}}

{{block 'head'}}
<link rel="stylesheet" href="/public/css/markdown-github.css">
<style>
  .panel .panel-heading .action i {
    margin-right: 10px;
  }
</style>
{{/block}}

{{block 'body'}}
<section class="container">
  <div class="row">
    <div class="col-md-9">
      <article class="markdown-body">
      <h1 id="_1"><a name="user-content-_1" href="#_1" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>{{topic.title}}</h1>
      <div>{{topic.content}}</div>
    </article>
      {{each comments}}
      <div class="panel panel-default">
        <div class="panel-heading">
          <span>{{$value.commentName}}</span> commented 
          <span>{{$value.createdTime}}</span>
          <span class="action">
            <a href=""><i class="glyphicon glyphicon-remove-circle pull-right"></i></a>
          </span>
        </div>
        <div class="panel-body">
          {{$value.commentContent}}
        </div>
      </div>
      {{/each}}
      <hr>
      <form id="send_comment">
        <div class="form-group">
          <input type="hidden" name="topicId" value="{{topic.id}}">
          <label for="exampleInputPassword1">添加回复</label>
          <textarea class="form-control" name="commentContent" cols="10" rows="10"></textarea>
        </div>
        <button type="submit" class="btn btn-success">回复</button>
      </form>
    </div>
  </div>
</section>
<script src="/node_modules/jquery/dist/jquery.js"></script>
  <script>
    $('#send_comment').on('submit', function (e) {
      e.preventDefault()
      var formData = $(this).serialize()
      $.ajax({
        url: '/topics/comment',
        type: 'post',
        data: formData,
        dataType: 'json',
        success: function (data) {
          var err_code = data.err_code
          if (err_code === 0) {
            window.alert('评论成功')
            window.location.reload()
          } else if (err_code === 500) {
            window.alert('服务器忙，请稍后重试！')
          }
        }
      })
    })
  </script>
{{/block}}
